<template>
  <div class="editor">
    <!-- 图谱搜索框 -->
    <!-- <graph-editor-search></graph-editor-search> -->

    <!-- 选取查看组别 -->
    <GraphEditorGroup :groups="nodeGroups"
                      v-if="showGraphContent"
                      @graph-action="passingGraphAction"
    />

    <el-divider v-if="showGraphContent"> </el-divider>
    <!-- 结构风险 -->
    <StructuralRisk
        v-if="showStructuralRisk"
        ref="structuralRisk"
        @showRiskChart="changeRiskSimulation"
    />
    <!-- 图谱内容查看/修改 -->
    <GraphEditorItem
        v-if="showGraphContent"
        ref="item"
        :projectId="graphData && graphData.projectId"
        :nodeOptions="nodeOptions"
        :nodeGroups="nodeGroups"
        @graph-action="passingGraphAction"
    >
      <GraphEditorSearch
          v-if="showGraphContent"
          :projectId="graphData && graphData.projectId"
          :nodes="safeNodes"
          :links="safeLinks"
          @editor-action="dispatchEditorAction"
          @graph-action="passingGraphAction"
      />
    </GraphEditorItem>

<!--    <el-divider v-if="showGraphContent"></el-divider>-->
<!--    &lt;!&ndash; 风险系数级别 &ndash;&gt;-->
<!--    <GaugeGrade />-->

    <el-divider v-if="showGraphContent"></el-divider>

    <!-- 图谱统计数据 -->
    <GraphEditorStatistics
      v-if="showGraphContent"
      :statisticsData="statisticsData"
    />
    <!-- 横线分割 -->
    <el-divider v-if="showGraphContent" ></el-divider>
    <!-- 风险值数目统计数据 -->
    <GraphEditorRiskValue v-if="showGraphContent" />

  </div>
</template>

<script>
import GraphEditorSearch from './GraphEditorSearch'
import GraphEditorGroup from './GraphEditorGroup'
import GraphEditorItem from './GraphEditorItem'
import GraphEditorStatistics from './GraphEditorStatistics'
import GraphEditorRiskValue from './GraphEditorRiskValue.vue'
import StructuralRisk from './StructuralRisk.vue'
import GaugeGrade  from "./GaugeGrade.vue";

export default {
  name: 'GraphEditor',
  components: {
    StructuralRisk,
    GraphEditorSearch,
    GraphEditorGroup,
    GraphEditorItem,
    GraphEditorStatistics,
    GraphEditorRiskValue,
    GaugeGrade
  },
  props: {
    graphData: {
      type: Object
    },
    nodesScale: {
      type: Function
    },
    nodeOptions: {
      type: Array
    },
    nodeGroups: {
      type: Array
    }
  },
  data() {
    return {
      searchNodeName: '',
      showGraphContent: true, // 控制 "图谱内容查看/修改" 的显示
      showStructuralRisk: false // 控制 "结构风险" 的显示
    }
  },
  mounted() {
    // 在组件挂载时添加事件监听
    document.addEventListener('click', this.handleOutsideClick);
  },
  beforeDestroy() {
    // 在组件销毁时移除事件监听，避免内存泄漏
    document.removeEventListener('click', this.handleOutsideClick);
  },
  computed: {
    safeNodes() {
      return this.graphData ? this.graphData.nodes : []
    },
    safeLinks() {
      return this.graphData ? this.graphData.links : []
    },
    statisticsData() {
      console.log('this.graphDatasdasdvav', this.graphData)
      const nodes = this.graphData && this.graphData.nodes
      const nodesScale = this.nodesScale
      if (!nodes || !nodesScale) return []

      const dataMapper = {}
      nodes.forEach(({ group }) => {
        if (!Reflect.has(dataMapper, group)) {
          dataMapper[group] = 0
        }
        dataMapper[group]++
      })
      const data = Reflect.ownKeys(dataMapper).map(group => ({
        name: group,
        value: dataMapper[group],
        itemStyle: {
          color: nodesScale(group)
        }
      }))
      data.sort(({ name: x }, { name: y }) => (x < y ? -1 : x === y ? 0 : 1))
      return data
    }
  },
  methods: {
    // 向父组件Graph发送请求
    changeRiskSimulation(value){
      this.$emit('showRiskChart', value)
    },
    // 点击外部区域时触发的函数
    // handleOutsideClick(event) {
    //   // 判断点击的目标是否是 StructuralRisk 组件的外部区域
    //   if (this.$refs.structuralRisk && !this.$refs.structuralRisk.$el.contains(event.target)) {
    //     this.showGraphContent = true; // 显示图谱内容
    //     this.showStructuralRisk = false; // 隐藏结构风险
    //   }
    // },
    dispatchEditorAction(name, ...args) {
      this.$refs.item[name](...args)
    },
    passingGraphAction(...args) {
      this.$emit('graph-action', ...args)
    },
    exitRiskSimulation(){
      this.showGraphContent = true
      this.showStructuralRisk = false
    },
    // 更改风险组件的显示逻辑
    updateRiskSimulation(riskType) {
      // 默认显示图谱内容，隐藏风险内容
      this.showGraphContent = false
      this.showStructuralRisk = false

      // 根据不同的风险类型显示不同的内容
      if (riskType === 'structuralRisk') {
        this.showStructuralRisk = true
      }
      // 可以根据需要继续添加其他风险类型的显示控制
      if (riskType === 'environmentalRisk') {
        this.showStructuralRisk = true;
      }
      else if (riskType === 'operationalRisk') {
        this.showStructuralRisk = true;
      }
    }
  }
}
</script>

<style scoped>
.editor {
  padding: 15px;
}
</style>
